<template>
	<view class="content">
		<view class="topBox">
		<u-navbar :is-back="true" :border-bottom="false">
			<view class="navbar" slot="">
				<image src="../../static/img/saoyisao.png" mode="" @click="scanCode" class="left" style="width: 40upx;height: 40upx;"></image>
				<u-search placeholder="输入商品名称" v-model="keyword" :clearabled="true"
				bg-color="#fff" border-color="#FD4543"
				@search="inpsearch"
				@custom="inpsearch"
				:show-action="true"
				style="width: 560upx;"
				></u-search>
			</view>
			
		</u-navbar>
		<!-- <view class="searchListBox" v-if="noSeach">
			<view class="hostry">
				<view class="name">历史搜索</view>
				<image src="../../static/img/trash.png"></image>
			</view>
			<view class="searchList">
				<view class="item" v-for="item in this.globalData.keywordList">搜索1</view>
			</view>
		</view> -->
		<!-- <u-sticky>
			<view class="sticky">
				<view class="item" @click="changePirce(1)" :class="stickyCurrent == 1 ? 'active' :'' ">
					综合
				</view>
				<view class="item" @click="changePirce(2)" :class="stickyCurrent == 2 ? 'active' :'' ">
					销量
				</view>
				<view class="item" @click="changePirce(3)" :class="stickyCurrent == 3 ? 'active' :'' ">
					价格
					<u-icon name="arrow-down-fill" :class="stickyCurrent == 3 ? 'active' :'' " v-if="up ==2"></u-icon>
					<u-icon name="arrow-up-fill" :class="stickyCurrent == 3 ? 'active' :'' " v-else></u-icon>
				</view>
			</view>
		</u-sticky> -->
		</view>
		<view class="search" v-show="!isSearch">
			<image src="../../static/img/mescroll-empty.png"></image>
		</view>
		<scroll-view scroll-y="true"  :style="{height:height+'px'}" @scrolltolower='lwor' v-show="isSearch">
			<view class="goodsBox">
				<!-- 瀑布流 -->
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="box" style="margin-right: 10upx;">
							<view class="items" @click="toDetail(item.goodsId)" v-for="(item, index) in leftList" :key="index+item">
								<image :src="JSON.parse(item.coverImg)[0]" mode="widthFix"></image>
								<view class="content">
									<view class="title">
										<view>{{item.goodsName}}</view>
									</view>
									<view class="bottom">
										<view class="left">￥<text class="price">{{item.unitPrice || 0}}</text></view>
										<view class="right">销量:{{item.sales || 0}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="box" style="margin-left: 10upx;">
							<view class="items" @click="toDetail(item.id)" v-for="(item, index) in rightList" :key="index+item">
								<image :src="JSON.parse(item.coverImg)[0]" mode="widthFix"></image>
								<view class="content">
									<view class="title">
										<view>{{item.goodsName}}</view>
									</view>
									<view class="bottom">
										<view class="left">￥<text class="price">{{item.unitPrice || 0}}</text></view>
										<view class="right">销量:{{item.sales || 0}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<u-loadmore :status="status" bg-color="rgba(255,255,255,0)" margin-top='15' margin-bottom='15' @loadmore='laodmore' :loadText="loadText"/>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from '@/api/goods/index.js';
 	export default {
		components: {
			
		},
		data() {
			return {
				orderType:1,
				noSeach:true,
				flowList: [],
				stickyCurrent:0,
				up:0,
				keyword:'',
				status: 'loading',
				loadText: {
						loadmore: '获取数据错误,点击重新加载',
						loading: '加载中',
						nomore: '没有更多了哦'
					},
				pageSize: 20,
				pageNum: 1,
				pages: 0,
				search: '',
				height:0,
				isEmpty: false,
				isSearch: false,
				tabIndex: 0,
				searchNow:false,
				goodList: [
				],
			}
		},
		onLoad(e) {
			
		},
		onShow() {
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height = res.windowHeight - data.height
					}).exec()
				}
			});
			
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/goodsDetail/index?goodsId=' + id
				})
			},
			laodmore(){
				this.pageNum = 1
				this.status = 'loading'
				this.$refs.uWaterfall.clear();
				this.flowList = []
				this.searchFun()
			},
			lwor(){
				if(this.status == 'nomore'){
					// uni.showToast({
					// 	title:'已经到底啦',
					// 	icon:'none'
					// })
				}
				this.getGoodsList()
			},
			addRandomData(list) {
				for(let i = 0; i < list.length; i++) {
					// let index = this.$u.random(0, list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(list[i]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			// changePirce(val){
			// 	if(this.stickyCurrent == val && val !=3){
			// 		return
			// 	}
			// 	this.stickyCurrent = val;
			// 	if(val == 3){
			// 	this.up == 1 ? this.up = 2 : this.up = 1;
			// 	}else{
			// 		this.up = 0
			// 	}
			// 	this.orderType = this.stickyCurrent
			// 	if(this.orderType == 2){
			// 		this.orderType = 4
			// 	}
			// 	if(this.orderType == 3){
			// 		this.up == 1 ? this.orderType = 2:this.orderType =3
			// 	}
			// 	this.pageNum = 1
			// 	this.status  = 'loading'
			// 	this.$refs.uWaterfall.clear()
			// 	this.searchFun()
			// },
			//禁止滑动
			moveHandle() {},
			inpsearch(){
				if(this.keyword == ''){
					uni.showToast({
						title:'商品名字不能为空',
						icon:'none'
					})
					return
				}
				if(this.searchNow){
					return
				}
				this.searchNow = true
				this.isSearch = true
				this.pageNum = 1
				this.status  = 'loading'
				this.$refs.uWaterfall.clear()
				this.searchFun()
			},
			async searchFun(){
				try {
					let params = {
						pageNum:this.pageNum,
						pageSize:this.pageSize,
						goodsName:this.keyword,
						// orderType:this.orderType,
					}
					const ret = await api.goodsSearch(params);
					var that = this
					setTimeout(function() {
						that.searchNow = false
						if (ret.data.obj.list.length < that.pageSize) {
							that.status = 'nomore'
						}
						that.pageNum++
						that.addRandomData(ret.data.obj.list)
						console.log(ret.data.obj.list)
					}, 500)
				}catch(error){
					this.searchNow = false
					this.status = 'loadmore'
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	$black: #333;
	$orange: #EA560E;
	.search{
		margin-top: 300rpx;
		text-align: center;
		image{
			width: 400rpx;
			height: 400rpx;
		}
	}
	.searchListBox{
		.hostry{
			display: flex;
			font-size: 26rpx;
			padding: 30rpx;
			padding-bottom: 0;
			align-items: center;
			justify-content: space-between;
			image{
				width: 35rpx;
				height: 35rpx;
			}
		}
		.searchList{
			padding: 30rpx;
			padding-top: 10rpx;
			padding-left: 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item{
				background: #E0E0E0;
				margin-left: 30rpx;
				font-size: 25rpx;
				padding: 8rpx 25rpx;
				border-radius: 100rpx;
				margin-top: 20rpx;
			}
		}
	}
	.content {
		.navbar{
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			.left{
				font-size: 40upx;
				margin-right: 20upx;
			}
		}
		.goodsBox{
			padding: 20rpx;
			padding-top: 0;
			.box{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.items{
					border-radius: 10rpx;
					overflow: hidden;
					margin-top: 20rpx;
					flex: 1;
					background: #FFFFFF;
					image{
						width: 100%;
						// height: 345rpx;
						border-radius: 10rpx 10rpx 0 0;
					}
					.content{
						.title{
							view{
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								line-clamp: 1;
								-webkit-box-orient: vertical;
							}
							padding: 20rpx;
							padding-top: 10rpx;
						}
						.bottom{
							padding: 20rpx;
							padding-top:0rpx;
							display: flex;
							color: #FD4543;
							justify-content: space-between;
							align-items: center;
							.left{
								font-size: 24rpx;
								text{
									font-size: 35rpx;
									color: #FE5900;
								}
							}
							.right{
								font-size: 24upx;
								color: #949494;
								
							}
						}
					}
				}
			}
		}
		
		.sticky{
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:30upx 40upx;
			.item{
				font-size: 30upx;
				color: #787777;
				.select{
					transform: rotate(180deg);
				}
			}
			.active{
				color: $base-color;
			}
		}
	}
	.uni-searchbar__box{
		border: 0!important;
		}
</style>
